import React, {useState, useEffect,useRef} from "react";
import {Button, Row, Col, Input} from 'antd';
import './fileSearch.less'
import {CloseOutlined} from "@ant-design/icons";
import PropTypes from 'prop-types';
const {Search} = Input;

const FileSearch = ({title, onFileSearch}) => {
    const [inputActive, setInputActive] = useState(false)
    const [value, setValue] = useState('')
    let node=useRef(null)
    const closeSearch = (e) => {
        e.preventDefault()
        setInputActive(false)
        setValue('')
    }
    // useEffect(() => {
    //     const handleInputEvent = (event) => {
    //
    //         const {keyCode} = event
    //         if (keyCode === 13 && inputActive) {
    //             onFileSearch(value)
    //         } else if (keyCode === 27 && inputActive) {
    //             console.log('cao')
    //             closeSearch(event)
    //         }
    //     }
    //     document.addEventListener('keyup',handleInputEvent)
    //     return ()=>{
    //         document.removeEventListener("keyup",handleInputEvent )
    //     }
    // })
    useEffect(()=>{
        if(inputActive){
            node.current.focus()
        }
    },[inputActive])
    return (
        <div className='file-search'>
            {!inputActive &&
            <Row className='col' justify='space-around' align='middle'>
                <Col span={15} className='col-style'>
                    <span>{title}</span>
                </Col>
                <Col span={5}>
                    <div className='col-style'><Button type='primary' size="small" onClick={() => {
                        setInputActive(true)
                    }}>搜索</Button></div>
                </Col>
            </Row>
            }
            {inputActive &&
            <Row className='col' justify='space-around' align='middle'>
                <Col span={15}>
                    <div>
                        <Search
                            placeholder="input search text"
                            allowClear
                            defaultValue={value}
                            enterButton="Search"
                            size="small"
                            ref={node}
                            onPressEnter={(e)=>{
                                setValue(e.target.value)
                                onFileSearch(value)
                            }
                            }
                            onSearch={(e) => {
                                setValue(e)
                                onFileSearch(value)
                            }}
                        />
                    </div>
                </Col>
                <Col span={5}>
                    <div>
                        <Button type='primary' size="small" onClick={closeSearch}>
                            <CloseOutlined/>
                        </Button>
                    </div>
                </Col>
            </Row>
            }
        </div>
    )
}
FileSearch.propTypes={
    title:PropTypes.string,
    onFileSearch:PropTypes.func.isRequired
}
export default FileSearch